import {
  BoxGeometry, // 立方缓冲几何体
  Color, // 颜色
  Mesh, // 网格
  MeshBasicMaterial, // 基础网格材质
  Scene, // 场景
  PerspectiveCamera, // 透视相机
  WebGLRenderer, // WebGL Render 用WebGL渲染出你精心制作的场景。
} from "three";
try {
  // 获取存在canvas的容器
  const container = document.querySelector("#scene-container");
  if (container === null) {
    throw Error("The container is null.");
  }
  // 创建场景
  const scene = new Scene();
  scene.background = new Color("skyblue"); // 设置背景颜色

  // 创建相机
  const fov = 35; // 视野： 相机的视野有多宽，以度为单位。
  const aspect = container.clientWidth / container.clientHeight; // 纵横比： 场景的宽度与高度的比率。
  const near = 0.1; // 近剪裁平面：任何比这更靠近相机的东西都是不可见的。
  const far = 100; // 远剪裁平面：任何比这更远离相机的东西都是不可见的。
  const camera = new PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0, 0, 10); // 设置相机位置

  // 创建几何体
  const geometry = new BoxGeometry(2, 2, 2);
  // 创建材质
  const material = new MeshBasicMaterial();
  // 创建网格
  const cube = new Mesh(geometry, material);
  // 将网格添加到场景中
  scene.add(cube);
  // 创建渲染器
  const renderer = new WebGLRenderer();
  // 设置渲染器大小
  renderer.setSize(container.clientWidth, container.clientHeight);
  // 设置设备像素大小 这是防止 HiDPI 显示器模糊所必需的 （也称为视网膜显示器）。
  renderer.setPixelRatio(window.devicePixelRatio);
  // 将canvas元素添加到我们的页面
  container.appendChild(renderer.domElement);
  // 渲染场景
  renderer.render(scene, camera);
} catch (error) {
  console.log(error);
}
